<template>
    <div
        class="number-info"
        :class="{ 'number-info__light': theme === 'light', 'number-info__default': theme === 'default' }"
    >
        <div v-if="title" class="number-info__title">
            <slot name="title">{{ title }}</slot>
        </div>
        <div v-if="subTitle || $slots.subTitle" class="number-info__title-sub">
            {{ subTitle }}
            <slot name="subTitle"></slot>
        </div>
        <div class="number-info__value" :style="{ 'margin-top': gap + 'px' }">
            <span class="number-info__value-text">
                <slot name="total">{{ total }}</slot>
                <em class="number-info__value-suffix" v-if="suffix">{{ suffix }}</em>
            </span>
            <span v-if="status || subTotal" class="number-info__value-text number-info__value-sub">
                <slot name="subTotal">{{ subTotal }}</slot>
                <caret-up-outlined
                    v-if="status == 'up'"
                    class="ml8"
                    style="margin: 0 16px 0 4px;"
                />
                <caret-down-outlined
                    v-if="status == 'down'"
                    class="ml8"
                   
                />
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>

/*
| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[title]` | 标题 | `TemplateRef<void>` | - |
| `[subTitle]` | 子标题 | `TemplateRef<void>` | - |
| `[total]` | 总量 | `string, number` | - |
| `[suffix]` | 总量后缀 | `string` | - |
| `[subTotal]` | 子总量 | `string, number` | - |
| `[status]` | 增加状态 | `'up','down'` | - |
| `[theme]` | 状态样式 | `'light','default'` | `'light'` |
| `[gap]` | 设置数字和描述直接的间距（像素） | `number` | 8 |
*/
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { defineProps, ref, useSlots } from 'vue';
defineProps({
    title: {},
    total: {},
    subTitle: {},
    subTotal: {},
    suffix: {},
    status: {},
    theme: {
        default: 'light'
    },
    gap: {
        default: 8
    }
})


</script>

<script lang="ts">
export default {
    name: 'number-info'
}
</script>
<style lang="less" scoped>
@number-info-prefix: ~".number-info";
@text-color: fade(#000, 85%);
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@green-6: #52c41a;
@text-color-secondary: fade(#000, 45%);
@red-6: #f5222d;
@heading-color: fade(#000, 85%);

@{number-info-prefix} {
    display: inline-block;
    &__title {
        margin-bottom: 16px;
        color: @text-color;
        font-size: @font-size-lg;
        transition: all 0.3s;
        &-sub {
            height: 22px;
            overflow: hidden;
            color: @text-color-secondary;
            font-size: 14px;
            line-height: 22px;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
    }
    &__value {
        margin-top: 4px;
        overflow: hidden;
        font-size: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        &-suffix {
            margin-left: 4px;
            color: @text-color;
            font-size: 16px;
            font-style: normal;
        }
        &-text {
            display: inline-block;
            height: 32px;
            color: @heading-color;
            font-size: 24px;
            line-height: 32px;
        }
        &-sub {
            margin-left: 32px;
            color: @text-color-secondary;
            font-size: @font-size-lg;
            vertical-align: top;
            .anticon {
                margin-left: 4px;
                font-size: 12px;
                transform: scale(0.82);
            }
            .anticon-caret-up {
                color: @red-6;
            }
            .anticon-caret-down {
                color: @green-6;
            }
        }
    }
    &__light {
        @{number-info-prefix}__value-text {
            color: @text-color;
        }
    }
    &:not(:first-child) {
        position: relative;
        margin-left: 32px;
        padding-left: 32px;
        &::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 1px;
            margin: 8px 0;
            background-color: #52c41a;
            content: "";
        }
    }
}
</style>